<template>
  <view class="root">
    <image class="bg-img" :src="`${baseImgUrl}/shiyoufangwu4.png`"></image>
    <view class="content-wrapper">
      <!--top-->
      <view class="top">
        <view class="community-name">{{ routerParams.bName }}</view>
        <view class="house-name">
          {{ routerParams.roomName }}
        </view>
        <u-line color="#DFDDDD" margin="23rpx 0 32rpx 0"></u-line>
        <view class="item-wrapper">
          <!-- <view class="i-left">
            <view class="i-label">房屋类别:</view>
            <view class="i-value">{{ isTsyfwinfo.fFwlbName }}</view>
          </view>
          <view class="i-right">
            <view class="i-label">房屋性质:</view>
            <view class="i-value">{{ isTsyfwinfo.fFwxzName }}</view>
          </view> -->
        </view>
        <view class="item-wrapper">
          <view class="i-left">
            <view class="i-label">房屋类型:</view>
            <view class="i-value">{{ isTsyfwinfo.fFwlxName }}</view>
          </view>
        </view>
        <view class="item-wrapper">
          <view class="i-right">
            <view class="i-label">房屋用途:</view>
            <view class="i-value">{{
              isTsyfwinfo.fFwytName ? isTsyfwinfo.fFwytName : "暂未添加"
            }}</view>
          </view>
        </view>
        <!-- <view class="item-wrapper">
          <view class="i-left">
            <view class="i-label">房屋间数:</view>
            <view class="i-value">{{ isTsyfwinfo.fFwjs ? `${isTsyfwinfo.fFwjs}间` : '暂未添加' }}</view>
          </view>
          <view class="i-right">
            <view class="i-label">房屋面积:</view>
            <view class="i-value">{{ isTsyfwinfo.fFwmj ? `${isTsyfwinfo.fFwmj.toFixed(2)}㎡` : '暂未添加'  }}</view>
          </view>
        </view> -->

        <view class="item-wrapper">
          <!-- <view class="i-left">
            <view class="i-label">房屋产权号:</view>
            <view class="i-value">{{ isTsyfwinfo.fFwcqh ? isTsyfwinfo.fFwcqh : '暂未添加' }}</view>
          </view> -->
          <view class="i-right">
            <view class="i-label">房屋负责人:</view>
            <navigator :url="
                routerParams.isMain == 1
                  ? `/selfInfo/myHouse/housingManager?fHouseid=${isTsyfwinfo.fHouseid}&source=actualRealHouse&buildingId=${isTsyfwinfo.fSsjzwDzbm}`
                  : '/selfInfo/myHouse/housingManagerDetail?info=' +
                    encodeURIComponent(JSON.stringify(policeHouseMainsList))
              ">
              <view class="i-value house-owner">
                <!--1 是托管人-->
                查看>
              </view>
            </navigator>
          </view>
        </view>
        <u-line color="#DFDDDD" margin="0 0 23rpx 0"></u-line>
        <view class="item-wrapper">
          <view class="i-left">
            <view class="i-label">所属辖区:</view>
            <view class="i-value">{{ isTsyfwinfo.policeJurisdictionId }}</view>
          </view>
        </view>
        <view class="item-wrapper">
          <view class="i-right">
            <view class="i-label">采集人员:</view>
            <view class="i-value">{{
              `${isTsyfwinfo.fCjrxm}(${isTsyfwinfo.fCjrxmType})`
            }}</view>
          </view>
        </view>
        <view class="item-wrapper">
          <view class="i-left">
            <view class="i-label">采集时间:</view>
            <view class="i-value">
              {{
                isTsyfwinfo.fCjsj
                  ? moment(isTsyfwinfo.fCjsj).format("yyyy-MM-DD HH:mm:ss")
                  : ""
              }}
            </view>
          </view>
        </view>
        <!-- <u-line color="#DFDDDD"></u-line> -->
        <!-- <view class="location">
          <img class="img-location" src="" alt="" />
          <view class="text">西安市碑林区火炬路53号</view>
        </view> -->
      </view>
      <!--down-->
      <view class="down">
        <view class="p-name">
          {{ routerParams.isMain == "1" ? "现居人员" : "我的人口信息" }}
        </view>
        <u-line color="#DFDDDD" margin="0 0 23rpx 0"></u-line>
        <view class="person-item" v-for="(item, index) in housePopulationlist" :key="index">
          <image class="avatar-img" :src="
              item.fFaceUrl
                ? `${imgPrefix}${item.fFaceUrl}`
                : `${baseImgUrl}queryFace-01.png`
            " @click="
              pvwImage([
                item.fFaceUrl
                  ? `${imgPrefix}${item.fFaceUrl}`
                  : `${baseImgUrl}queryFace-01.png`,
              ])
            "></image>
          <view class="right-wrapper">
            <view class="right-item">
              <view class="label-n">居民姓名:</view>
              <view class="name-container">
                <view class="value-n">{{ item.fXm }}</view>
                <navigator
                  :url="`/selfInfo/myHouse/actualPopulationDetail?fId=${item.fId}&bName=${routerParams.bName}&roomName=${routerParams.roomName}&isMain=${routerParams.isMain}`">
                  <view class="l-detail">
                    <view class="l-detail-text">查看详情</view>
                    <u-icon name="arrow-right" color="#A5A5A5" size="18rpx"></u-icon>
                  </view>
                </navigator>
              </view>
            </view>
            <view class="right-item">
              <view class="label-n">身份证号:</view>
              <view class="value-n">{{ encryptIDCard(item.fGmsfhm) }}</view>
            </view>
            <view class="right-item">
              <view class="label-n">与房主关系:</view>
              <view class="value-n">{{ item.fCjrxmType }}</view>
            </view>
          </view>
        </view>
        <template v-if="!housePopulationlist.length">
          <u-empty mode="list" text="暂无内容！" :icon="`${baseImgUrl}no-icon2.png`"></u-empty>
        </template>
      </view>
    </view>
    <view class="button-wrapper" v-if="routerParams.isMain == '1'">
      <view class="btn-left btn-item" @click="handleModifyHouseMessage">
        <u-icon name="edit-pen" class="btn-icon" width="33" height="33"></u-icon>
        <view class="btn-text">修改房屋信息</view>
      </view>
      <view class="btn-left btn-item" @click="handleAddActualPopulation">
        <u-icon name="man-add" class="btn-icon" width="33" height="33"></u-icon>
        <view class="btn-text">添加现居人员</view>
      </view>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    getUnitsDetailsInfo
  } from "../../api/api";
  import {
    isLoading,
    pvwImage,
    formatters,
    getOptionsParams,
    encryptIDCard
  } from "../../utils/util";
  import moment from "@/utils/moment.js";

  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        routerParams: {},
        isTsyfwinfo: {},
        housePopulationlist: [],
        policeHouseMainsList: {},
        addressInfo: {},
      };
    },
    onShow() {
      this.initPage();
    },
    onLoad(options) {
      let routerParams = getOptionsParams(options);
      this.routerParams = routerParams;
      if (routerParams) {
        // 街路巷名字
        this.addressInfo.bName = routerParams.bName;
        this.addressInfo.roomName = routerParams.roomName;
        this.addressInfo.buildType = routerParams.buildType + "";
      }
      // this.initPage();
    },
    methods: {
      encryptIDCard,
      formatters,
      pvwImage,
      moment,
      initPage() {
        isLoading();
        let fDzbm = "";
        // 建筑物
        if (this.routerParams.buildType == 1) {
          fDzbm = this.routerParams.fSsjzwDzbm;
        }
        if (this.routerParams.buildType == 0) {
          fDzbm = this.routerParams.fDzbm;
        }
        let params = {
          ...this.routerParams,
          buildType: this.routerParams.buildType + "",
          fDzbm,
        };
        getUnitsDetailsInfo(params)
          .then((res) => {
            const {
              isTsyfwinfo,
              housePopulationlist,
              policeHouseMainsList
            } =
            res.result;
            this.isTsyfwinfo = isTsyfwinfo;
            this.setAddressInfo(isTsyfwinfo);
            this.housePopulationlist = housePopulationlist;
            this.policeHouseMainsList = policeHouseMainsList;
          })
          .finally(() => {
            isLoading(false);
          });
      },
      setAddressInfo(data) {
        const {
          fSsjlxxqDzbm,
          fSsjzwdyfwDzbm,
          fSsdyDzbm,
          fSslcDzbm,
          fSsjzwDzbm
        } =
        data;
        if (fSsjlxxqDzbm)
          this.$set(this.addressInfo, "fSsjlxxqDzbm", fSsjlxxqDzbm); // 街路巷
        if (fSsjzwdyfwDzbm)
          this.$set(this.addressInfo, "fSsjzwdyfwDzbm", fSsjzwdyfwDzbm); // 房间
        if (fSsdyDzbm) this.$set(this.addressInfo, "fSsdyDzbm", fSsdyDzbm); // 单元
        if (fSslcDzbm) this.$set(this.addressInfo, "fSslcDzbm", fSslcDzbm); // 楼层
        if (fSsjzwDzbm) this.$set(this.addressInfo, "fSsjzwDzbm", fSsjzwDzbm); // 建筑物
      },
      handleAddActualPopulation() {
        uni.navigateTo({
          url: "/selfInfo/myHouse/addActualPopulation?type=add&addressInfo=" +
            encodeURIComponent(JSON.stringify(this.addressInfo)),
        });
      },
      handleModifyHouseMessage() {
        uni.navigateTo({
          url: `/selfInfo/myHouse/modifyHouseInfo?type=edit&editOptions=${JSON.stringify(
          {
            ...this.isTsyfwinfo,
            addressDetail: this.routerParams.bName + this.routerParams.roomName,
          }
        )}`,
        });
      },
    },
  };
</script>

<style lang="scss">
  page {
    background: #f9f9f9;
  }
</style>
<style lang="scss" scoped>
  .root {
    .bg-img {
      width: 100%;
      height: 460rpx;
    }

    .content-wrapper {
      width: 712rpx;
      margin: 0 auto;
      margin-top: -240rpx;
      margin-bottom: 140rpx;
      position: relative;

      .top,
      .down {
        background: #ffffff;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 40rpx 20rpx 0 20rpx;
      }

      .top {
        padding-bottom: 10rpx;

        .community-name {
          font-weight: bold;
          font-size: 36rpx;
          color: #333333;
          margin-bottom: 29rpx;
        }

        .house-name {
          font-weight: 500;
          font-size: 28rpx;
          color: #aaaaaa;
        }

        .item-wrapper {
          display: flex;
          margin-bottom: 21rpx;

          .i-left,
          .i-right {
            flex: 1;
            display: flex;
          }

          .i-label {
            font-weight: 500;
            font-size: 28rpx;
            color: #aaaaaa;
            margin-right: 4rpx;
            flex-shrink: 0;
          }

          .i-value {
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }

          .house-owner {
            color: #2488f5;
          }
        }

        .location {
          height: 119rpx;
          display: flex;
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;
          align-items: center;

          .img-location {
            width: 29rpx;
            height: 29rpx;
            margin-right: 10rpx;
          }
        }
      }

      .down {
        margin-top: 12rpx;
        padding-bottom: 13rpx;

        .p-name {
          margin-bottom: 17rpx;
        }

        .person-item {
          display: flex;
          background: #f9f9f9;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          border: 1rpx solid #eceaea;
          margin-bottom: 10rpx;
          padding: 22rpx 36rpx;

          .avatar-img {
            width: 144rpx;
            height: 144rpx;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            margin-right: 16rpx;
          }

          .right-wrapper {
            flex: 1;

            .right-item {
              display: flex;
              margin-bottom: 14rpx;
            }

            .label-n {
              font-weight: 500;
              font-size: 28rpx;
              color: #aaaaaa;
              flex-shrink: 0;
              margin-right: 14rpx;
            }

            .name-container {
              display: flex;
              align-items: center;
              flex: 1;
              justify-content: space-between;

              .arrow-n {
                width: 9rpx;
                height: 18rpx;
                margin-left: 15rpx;
              }
            }

            .l-detail {
              font-weight: 400;
              font-size: 24rpx;
              color: #a5a5a5;
              display: flex;
              align-items: center;

              .l-detail-text {
                margin-right: 15rpx;
              }
            }

            .value-n {
              font-weight: 500;
              font-size: 26rpx;
              color: #333333;
            }
          }
        }
      }
    }

    .button-wrapper {
      height: 120rpx;
      background: #ffffff;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      align-items: center;
      justify-content: center;
      width: 100%;

      .btn-item {
        flex: 1;
        font-weight: bold;
        font-size: 26rpx;
        color: #000000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
      }

      .btn-text {}
    }
  }
</style>